<template>
    <div class="customerListTag">
        <div class="tableTitle">
            <div class="tableIcon"><img src="@/assets/img/flower_brown.png"></div>
            <div class="tableText">客户标签</div>
        </div>
        <div class="bgBox">
            <div style="padding-bottom: 1rem;">
                <div v-for="(item, index) in customerTagOpt" :key="index" class="tagLine">
                    <div class="tagClass">
                        <img class="required" src="@/assets/img/flower_red.png" alt="">{{item.name}}
                    </div>
                    <div 
                        v-for="(ele, indicator) in item.systemTags" 
                        :key='indicator'
                        class="tagCan"
                    >
                        <div
                            class="tag"
                            :style="`background: ${ele.checked === 1 ? (item.activeColor || '#7E6B5A') : (item.inactiveColor || '#E9E9E9')}; color: ${ele.checked === 1 ? '#FFF' : '#222222'}`"
                            @click="clickTag(index, indicator)"
                        >
                            {{ele.name}}
                        </div>
                        <div style="width: 15rem;" v-if="hasScore" v-show="ele.checked === 1">
                            <el-slider
                                :key="indicator"
                                v-model="ele.score"
                                :step="1"
                                :max="10"
                                show-stops
                            />
                        </div>
                    </div>
                </div>
                <div class="customTag"> 
                    <input class="tagInput" @keydown="handleType" v-model="customTagName" placeholder="自定义标签，回车确定" />
                    <div 
                        v-for="(item, index) in customTags.systemTags" 
                        :key="index" 
                        style="display: flex;height:3rem;align-items: center;"
                    >
                        <div class="tag" :style="`background: ${item.activeColor || '#7E6B5A'}; color: #FFF`">
                            {{item.name}}
                            <div class="closeBtn" @click="delTag(index)">×</div>
                        </div>
                        <div style="width: 20rem;" v-if="hasScore">
                            <el-slider
                                v-model="item.score"
                                :step="1"
                                :max="10"
                                :show-stops="true"
                                :show-tooltip="true"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import datas from '../../customerList/edit/datas.js'
import { objDeepCopy } from '@/assets/js/common.js'
//import { getTagsInfo } from '../../customerList/edit/axios.js'
export default {
    data() {
        return {
            customTagName: '',
            customTags: {},
            // 客户标签
            customerTagOpt:[],
            //customerTagOpt: datas.customerTagOpt,
            rowData: '',
            clearData: '',
            hasScore:true,
            score: ''
        }
    },
    props: {
        title: {
            type: String
        },
        isShowSymbol:{
            type:Boolean,
            default: false
        },
        // hasScore: {
        //     required: false
        // },
        pageType:{
            type: String
        },
        id:{
            type: String
        },
    },
    created() {
        //this.requireTags();
    },
    mounted(){
        console.log('times')
    },
    methods: {
        // requireTags() {
        //     !Array.isArray(this.customTags.systemTags) && getTagsInfo(this.id).then(res => {
        //         //console.log('详情',res);
        //         var data = res.data;
        //         if(data.status === 200) {
        //             this.rowData = data.result
        //             console.log('this.rowData',this.rowData)
        //             let groups = data.result.systemTagCategoryVO.systemTagGroups; //固定标签
        //             this.customTags = groups.splice(groups.length - 1, 1)[0] //自定义标签
        //             this.customerTagOpt = groups //固定标签
        //         }else{
        //            console.log('失败') 
        //         }
        //     });
        // },
        // clearInput() {
        //     getTagsInfo().then(res => {
        //         if(res.status === 200) {
        //             this.rowData = res.data.result
        //             let groups = res.data.result.systemTagGroups;
        //             this.customTags = groups.splice(groups.length - 1, 1)[0]
        //             this.customerTagOpt = groups
        //         }
        //     });
        // },
         // 获取标签
        /*requireTags() {
            !Array.isArray(this.customTags.systemTags) && getTagsInfo().then(res => {
                if(res.status === 200) {
                    console.log('获取标签啦啦啦啦',res)
                    this.showTags(res);
                    
                }
            });
        },
        clearInput() {
            getTagsInfo().then(res => {
                if(res.status === 200) {
                    this.showTags(res)
                }
            });
        },*/
        showTags(res) {
            this.rowData = res.data.result;
            let groups = res.data.result.systemTagCategoryVO.systemTagGroups;
            //let groups = res.data.result.systemTagGroups;
            // groups.map(item => {
            //     item.systemTags.map(ele => {
            //         ele.score = 5
            //     })
            // })
            this.customTags = groups.splice(groups.length - 1, 1)[0]
            this.customerTagOpt = groups
        },
        handleType(e) {
            if(e.keyCode === 13) {
                this.customTagName && this.customTags.systemTags.push({
                    name: this.customTagName,
                    createBy: -1,
                    checked: 1,
                    systemTagCategoryId: 1,
                    systemTagGroupId: 4
                    // score: ''
                });
                this.customTagName = ''
            }
        },
        // 删除
        delTag(index) {
            this.customTags.systemTags.splice(index, 1);
            this.getResult();
        },
        // 点击
        clickTag(index, indicator) {
            let temp = [...this.customerTagOpt];
            temp[index].systemTags[indicator].checked === 1
            ?
            temp[index].systemTags[indicator].checked = 0
            :
            temp[index].systemTags[indicator].checked = 1

            this.customerTagOpt = temp;
        },
        // // 编辑时勾选
        // dispatchData(data) {
        //     this.rowData = data.systemTagCategoryVO;
        //     let groups = data.systemTagCategoryVO.systemTagGroups;
        //     this.customTags = groups.splice(groups.length - 1, 1)[0]
        //     this.customerTagOpt = groups;
        // },
         // 编辑时勾选
        dispatchData(data) {
            this.rowData = objDeepCopy(data.systemTagCategoryVO);
            let groups = objDeepCopy(data.systemTagCategoryVO.systemTagGroups);
            this.customTags = groups.splice(groups.length - 1, 1)[0]
            this.customerTagOpt = groups
        },
        // 获取结果
        getResult() {
            this.rowData && (this.rowData.systemTagGroups = [...this.customerTagOpt, this.customTags]);
            // let pass = true;
            // this.customerTagOpt.map(item => {
            //     let flag = false
            //     item.systemTags.map(ele => {
            //         ele.checked == 1 && (flag = true)
            //     })
            //     !flag && (pass = false)
            // })
            // !pass && this.$message({
            //     message: '勾选客户标签',
            //     type: 'warning'
            // })
            return this.rowData
        },
    },
}
</script>

<style>
.customerListTag .el-slider__button{
    width: 14px;
    height: 14px;
    background-color:#7E6B5A;
    border:0 
}
.customerListTag .el-slider__bar{
    background-color:#7E6B5A;
}
.customerListTag .el-slider__runway{
    background-color:#e2e2e2;
}
</style>

<style scoped>
    .title{
        color: #827060;
        font-size: 1.4rem;
        font-weight: bold;
        margin-bottom: 1rem;
    }
    .tagLine{
        display: flex;
        /* display: -webkit-box; */
        margin-bottom: 1rem;
    }
    .tagLine:nth-child(4){
        display: -webkit-box !important;
    }
    .tagLine:nth-child(4) .tagCan{
        display: inline-block;
        margin-bottom: 1rem
    }
    .tagLine:nth-child(4) .sliderList{
        position: relative;
        top: 14px
    }
    .sliderList{
        width: 15rem; 
        display:inline-block
    }
    .tagClass{
        font-size: 14px;
        color: #888;
        height: 3rem;
        line-height: 3rem;
        padding: 0 2rem 0 0;
    }
    .tagClass img{
        vertical-align: middle;
        margin-bottom: 1px;
    }
    .tag{
        /* width: 5rem; */
        height: 3rem;
        line-height: 3rem;
        padding: 0 2rem;
        border-radius: .4rem;
        background: cyan;
        margin-right: 1rem;
        font-size: 1.4rem;
        position: relative;
        cursor: pointer;
        /* float: left; */
        display: inline-block;
    }
    .tagCan{
        display: flex;
        margin-right: 1rem;
    }
    .customTag{
        display: flex;
        margin-top: 1.5rem;
        flex-wrap: wrap;
        margin-left: 8.4rem;
    }
    .tagInput{
        width: 20rem;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        height: 3.2rem;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        margin-right: 2rem;
        margin-bottom: .8rem;
    }
    .scoreInput{
        width: 13rem;
        height: 3rem;
        border: 1px solid #dcdfe6;
        border-radius: .3rem;
        margin-right: 1rem;
        padding: 0 15px;
        outline: none;
    }
    .closeBtn{
        position: absolute;
        width: 1rem;
        height: 1rem;
        line-height: 1rem;
        font-size: 2.2rem;
        right: 0.2rem;
        top: 0.2rem;
    }
    .closeBtn:hover{
        color: red;
    }
    .bgBox{
        background: #FFF;
        padding: 0 2.4rem;
    }
    .formLayout .tableTitle{
        padding: 0;
    }
    /* .tableTitle{
        height: 4rem;
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: flex-start;
        background: #FFF;
    }
    .tableIcon{
        width: .4rem;
        margin-left: 1rem;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tableText{
        height: 100%;
        line-height: 4rem;
        margin-left: 0.4rem;
        font-size: 1.5rem;
        font-weight: bold;
        color: #715D4A;
    } */

    
</style>